import axios from './js/axios.js';
import './css/index.css';
import './css/common.css';
import './js/axios.js';
import img1 from './img/首页/scan.png';
import img2 from './img/首页/thumb.png';

let slideShowData;
// 初始化轮播图
// 获取轮播图的内容部分
// let main = document.querySelector("main")
//记录图片
let indexPic = 0;
let slideShowPic = document.querySelector('.slideShow-pic');
let slideShowDot = document.querySelector('.slideShow-dot');
let slideShowContent = document.querySelector('.slideShow-content');
let timer;
axios({
    url: 'http://119.91.237.19:7001/api/web/carouselGroup/get',
    method: 'get',
    params: {
        projectId: 26,
        carouselGroupId: 21,
    },
})
    .then((res) => {
        // console.log(res);
        slideShowData = res.data.data.w_carousels;
        // console.log(slideShowData);
        slideRender();
        slideInterval();
    })
    .catch((err) => {
        console.log(err);
    });

function slideRender() {
    // 获取数据将图片放入到对应区域
    slideShowData.forEach(function (item, index) {
        //渲染图片
        slideShowPic.innerHTML += `<li><img src=${item.url} alt="" /></li>`;
        // 渲染小圆点(第一个给其dot-active类)
        if (index === 0) {
            slideShowDot.innerHTML += `<li class="dot-active" data-id="${index}"></li>`;
        } else {
            slideShowDot.innerHTML += `<li data-id="${index}"></li>`;
        }
    });
}

// 初始化热门航拍点
function hotDataFn() {
    axios({
        url: 'http://119.91.237.19:7001/api/web/classify/getById',
        method: 'get',
        params: {
            projectId: 26,
            id: 57,
        },
    }).then((res) => {
        // console.log(res.data.data);
        let hotObj = res.data.data;
        hotRender(hotObj);
    });
}
hotDataFn();
function hotRender(obj) {
    let hotTitleSpan = document.querySelector('.hot-title>span');
    hotTitleSpan.innerHTML = obj.name;
    let hotData = obj.w_cases;
    // console.log(hotData);
    let hotBlock = document.querySelector('.hot-block');
    let str = '';
    hotData.forEach(function (item) {
        str += `<li class="hot-introduction">
    <div class="hot-introction-pic"></div>
    <p>${item.name}</p>
    </li>`;
    });
    hotBlock.innerHTML = str;
    let hotBlockLis = hotBlock.querySelectorAll('.hot-introction-pic');
    hotBlockLis.forEach(function (item, index) {
        item.style.backgroundImage = `url(${hotData[index].cover})`;
    });
}

// 新获取分类
axios({
    url: 'http://119.91.237.19:7001/api/web/classify/getAll',
    method: 'get',
    params: {
        projectId: 26,
    },
}).then((res) => {
    let index = 0;
    // console.log(res);
    let arr = res.data.data.rows.filter(function (item) {
        return item.name.slice(-1, item.name.length) === '副';
    });
    // console.log(arr);
    idToContent(arr, index);
});

// 根据id找数据
async function idToContent(arr, index = 0) {
    if (index >= arr.length) {
        return; // 结束递归
    }
    const num = arr[index];
    try {
        // eslint-disable-next-line no-unused-vars
        const res = await axios({
            url: 'http://119.91.237.19:7001/api/web/classify/getById',
            method: 'get',
            params: {
                id: num.id,
                projectId: 26,
            },
        }).then((res) => {
            // console.log(res);
            renderSecondary2(res);
        });
        // 递归调用下一次循环
        await idToContent(arr, index + 1);
    } catch (err) {
        console.log(err);
    }
}

// eslint-disable-next-line no-unused-vars
function idToUser(arr) {
    axios({
        url: 'http://119.91.237.19:7001/api/web/character/getAll',
        metehod: 'get',
        params: {
            projectId: 26,
        },
    }).then((res) => {
        console.log(res.data.data);
    });
}

async function renderSecondary2(obj) {
    // console.log(obj.data.data.w_cases);
    let userObj = await new Promise((resolve) => {
        resolve(
            axios({
                url: 'http://119.91.237.19:7001/api/web/character/getAll',
                metehod: 'get',
                params: {
                    projectId: 26,
                },
            })
        );
    });
    obj.data.data.w_cases.forEach((item) => {
        item['userName'] = userObj.data.data.filter(
            (ele) => ele.id === item.characterId
        )[0].name;
    });
    let secondaryBox = document.querySelector('.secondary-box');
    let itemTitle = obj.data.data;
    secondaryBox.innerHTML += `<div class="secondary">
  <div class="secondary-content">
    <div class="secondary-title">
      <span>${itemTitle.name.slice(0, -2)}</span>
      <div class="more">
        <ul class="a${itemTitle.id}-dot dot-click">
        </ul>
        <a href="">更多&gt;</a>
      </div>
    </div>
    <ul  class="a${itemTitle.id}">
    </ul>
  </div>
</div>`;
    // 数组
    // console.log(obj.data.data.w_cases);
    let itemContent = obj.data.data.w_cases;
    let secondaryContentRender = document.querySelector(`.a${itemTitle.id}`);
    itemContent.forEach(function (item) {
        secondaryContentRender.innerHTML += `<li class="secondary-block">
        <img src="${item.cover}" alt="" />
        <p class="secondary-text-title">${item.name}</p>
        <p class="secondary-text-device">设备：<span>${item.sketch}</span></p>
        <div class="scan">
          <img src="${img1}" alt="" /><span>${0}</span>
        </div>
        <div class="thumb">
          <img src="${img2}" alt="" /><span>${1}</span>
        </div>
        <div class="secondary-user">
          <span><i></i>${item.userName}</span><span>${new Date(
              item.w_caseclassify.createdAt
          ).toLocaleDateString()}</span>
        </div>
      </li>`;
    });
    // 获取数据长度
    let dotNum = itemContent.length;
    // 获取每个块的长度
    let secondaryBlockWidth =
        document.querySelector('.secondary-block').offsetWidth;
    // 获取区域的宽度
    let secondaryContentWidth = document.querySelector(
        `.a${itemTitle.id}`
    ).offsetWidth;
    let pageSize = Math.floor(secondaryContentWidth / secondaryBlockWidth);
    let pageNum = Math.ceil(dotNum / pageSize);
    let dotUl = document.querySelector(`.a${itemTitle.id}-dot`);
    for (let i = 0; i < pageNum; i++) {
        if (i === 0) {
            dotUl.innerHTML += `<li class="dot-active" data-id="${i}"></li>`;
        } else {
            dotUl.innerHTML += `<li data-id="${i}"></li>`;
        }
    }
    secondarySlide();
}

function labDataFn() {
    axios({
        url: 'http://119.91.237.19:7001/api/web/classify/getById',
        method: 'get',
        params: {
            projectId: 26,
            id: 58,
        },
    }).then((res) => {
        // console.log(res.data.data);
        renderLabelFn(res.data.data);
        labelSlideFn();
    });
}
labDataFn();
function renderLabelFn(obj) {
    let labelTitleSpan = document.querySelector('.label-title>span');
    labelTitleSpan.innerHTML = obj.name;
    // let moreDotUl = document.querySelector(".lab-more>ul")
    let labDataArr = obj.w_cases;
    let labdata = document.querySelector('.labData');
    let str = '';
    labDataArr.forEach(function (item) {
        str += `<li class="label-block">
    //   <img src="${item.cover}" alt="" />
    //   <p>${item.name}</p>
    // </li>`;
    });
    labdata.innerHTML = str;
    // 小圆点
    let labelDotClick = document.querySelector('.label-dot-click');
    // console.log(labelDotClick);
    // 获取区域宽度的宽度
    let labDataWidth = document.querySelector('.labData').offsetWidth;
    // 获取块的宽度
    let labelBlockWidht = document.querySelector('.labData>li').offsetWidth;
    let pageLabelSize = Math.floor(labDataWidth / labelBlockWidht);
    let pageLabelNum = Math.ceil(labDataArr.length / pageLabelSize);
    for (let i = 0; i < pageLabelNum; i++) {
        if (i === 0) {
            labelDotClick.innerHTML += `<li class="dot-active" data-id="${i}"></li>`;
        } else {
            labelDotClick.innerHTML += `<li data-id="${i}"></li>`;
        }
    }
}
// 轮播图功能
function slideInterval() {
    let liWidth = document.querySelector('.slideShow-pic>li').offsetWidth;
    function slideInterval() {
        slideShowPic = document.querySelector('.slideShow-pic');
        slideShowDot = document.querySelector('.slideShow-dot');
        slideShowContent = document.querySelector('.slideShow-content');
        // 获取所有小圆点
        let slideDots = document.querySelectorAll('.slideShow-dot>li');
        timer = setInterval(function () {
            // 移出当前的小圆点active
            slideDots[indexPic].classList.remove('dot-active');
            indexPic++;
            if (indexPic >= slideShowData.length) {
                indexPic = 0;
            }
            // 加完后给小圆点加上active
            slideDots[indexPic].classList.add('dot-active');
            slideShowPic.style.transform = `translate(-${
                indexPic * liWidth
            }px)`;
            // console.log(slideShowDot);
        }, 5000);
    }
    slideInterval();
    // 鼠标悬浮事件
    slideShowContent.addEventListener('mouseenter', function () {
        clearInterval(timer);
    });
    slideShowContent.addEventListener('mouseleave', function () {
        clearInterval(timer);
        slideInterval();
    });
    // 事件委托给小圆点添加点击事件
    slideShowDot.addEventListener('click', function (e) {
        if (e.target.tagName === 'LI') {
            let slideDots = document.querySelectorAll('.slideShow-dot>li');
            slideDots[indexPic].classList.remove('dot-active');
            indexPic = Number(e.target.dataset.id);
            slideDots[indexPic].classList.add('dot-active');
            slideShowPic.style.transform = `translate(-${
                indexPic * liWidth
            }px)`;
        }
    });
}

// 次级内容的分页轮播
function secondarySlide() {
    let dotClicks = document.querySelectorAll('.dot-click');
    dotClicks.forEach(function (item) {
        let indexSecondaryPage = 0;
        // 获取所有的小圆点
        let dots = item.querySelectorAll('li');
        item.addEventListener('click', function (e) {
            if (e.target.tagName === 'LI') {
                dots[indexSecondaryPage].classList.remove('dot-active');
                indexSecondaryPage = Number(e.target.dataset.id);
                dots[indexSecondaryPage].classList.add('dot-active');
                let change =
                    item.parentElement.parentElement.nextElementSibling;
                let changeLis = change.querySelectorAll('li');
                let ulWidth = change.offsetWidth;
                changeLis.forEach(function (item) {
                    item.style.transform = `translate(-${
                        indexSecondaryPage * ulWidth
                    }px)`;
                });
            }
        });
    });
}

// 标签内容的分页轮播
function labelSlideFn() {
    // 获取所有小圆点
    let labelDotClick = document.querySelector('.label-dot-click');
    let dotsLabel = labelDotClick.querySelectorAll('li');
    let indexLabelPage = 0;
    let labDataWidth = document.querySelector('.labData').offsetWidth;
    labelDotClick.addEventListener('click', function (e) {
        if (e.target.tagName === 'LI') {
            dotsLabel[indexLabelPage].classList.remove('dot-active');
            e.target.classList.add('dot-active');
            indexLabelPage = Number(e.target.dataset.id);
            let labelBlocks = document.querySelectorAll('.label-block');
            labelBlocks.forEach(function (item) {
                item.style.transform = `translate(-${
                    indexLabelPage * labDataWidth
                }px)`;
            });
        }
    });
}

function lazyFn() {
    let io = new IntersectionObserver(
        // eslint-disable-next-line no-unused-vars
        (entries) => {
            // console.log(entries);
        },
        {
            root: document.querySelector('body'), //将目标元素传递给root参数
        }
    );
    io.observe(document.querySelector('main'));
}
lazyFn();
